//
//  DetailView.swift
//  Crypto
//
//  Created by DaleGuo on 2023/9/25.
//

import SwiftUI

// 懒加载有待优化

struct DetailLoadingView: View {
    @Binding var coin: CoinModel?
    

    var body: some View {
        ZStack {
            if let coin = coin {
                DetailView(coin: coin)
            }
        }
    }
}

// 为方便编写，分离出optional Coin View
struct DetailView: View {
    @StateObject var vm: DetailViewModel
    
    
    @State private var showDesc = false
    
    private let columns: [GridItem] = [
        // 两列
        GridItem(.flexible()),
        GridItem(.flexible()),
    ]
    
    private let spacing: CGFloat = 30

    init(coin: CoinModel) {
        // vm is get-only
        _vm = StateObject(wrappedValue: DetailViewModel(coin: coin))

//        print("init  \(coin.name)")
    }

    var body: some View {
        ScrollView {
            
            ChartView(coin: vm.coin)
                .padding(.vertical)
            
            VStack(spacing: 20) {
                
                overviewTitle
                Divider()
                descriptionSection
                overviewGrid
                additionalTile
                Divider()
                additionalGrid
                linkSection
                
                
            }
            .padding()
        }
        .navigationTitle(vm.coin.name)
        .toolbar {
            ToolbarItem(placement: .topBarTrailing) {
                navigationBarTrailingItems
            }
        }
    }
}

#Preview {
    NavigationView {
        DetailView(coin: Preview.dev.coin)
    }
}

extension DetailView {
    private var overviewTitle: some View {
        Text("Overview")
            .font(.title)
            .bold()
            .foregroundStyle(Color.theme.accent)
            .frame(maxWidth: .infinity, alignment: .leading)
    }
    
    private var additionalTile: some View {
        Text("Additional Details")
            .font(.title)
            .bold()
            .foregroundStyle(Color.theme.accent)
            .frame(maxWidth: .infinity, alignment: .leading)
    }
    
    private var overviewGrid: some View {
        // 构造一个网格
        LazyVGrid(columns: columns, alignment: .leading, spacing: spacing, pinnedViews: [], content: {
            ForEach(vm.overviewStatistics) {
                stat in
                StatisticCoinView(stat: stat)
            }
            
        })
    }
    
    private var additionalGrid: some View {
        LazyVGrid(columns: columns, alignment: .leading, spacing: spacing, pinnedViews: [], content: {
            ForEach(vm.additionalStatistics) {
                stat in
                StatisticCoinView(stat: stat)
            }
            
        })
    }
    
    private var navigationBarTrailingItems: some View {
        HStack {
            Text(vm.coin.symbol.uppercased())
                .font(.headline)
            .foregroundStyle(Color.theme.secondaryText)
            
            CoinImageView(coin: vm.coin)
                .frame(width: 25)
                
        }
    }
    
    private var descriptionSection: some View {
        ZStack {
            if let coinDescription = vm.coinDescription {
                
                VStack(alignment: .leading) {
                    Text(coinDescription)
                        .lineLimit(showDesc ? nil : 3) // 点击阅读更多
                    
                    Button(action: {
                        withAnimation(.easeInOut) {
                            showDesc.toggle()
                        }
                    }, label: {
                        Text(showDesc ? "hide":"more..")
                            .font(.caption)
                            .fontWeight(.bold)
                            .padding(.vertical,4)
                    })
                    .tint(.blue)
                }
            }
        }
    }
    
    private var linkSection : some View {
        VStack(alignment: .leading)
            {
            // 外链 Link
            if let websiteURL = vm.websiteURL,
               let url = URL(string: websiteURL) {
                Link("Website", destination: url)
            }
            
            if let redditString = vm.redditURL,
               let url = URL(string: redditString) {
                Link("Reddit", destination: url)
            }
        }
        .tint(.blue)
        .frame(maxWidth: .infinity,alignment: .leading)
    }
}
